<template>
  <div>
    <h1>医疗诊断系统</h1>
    <form @submit.prevent="diagnose">
      <div>
        <label for="name">姓名:</label>
        <input type="text" v-model="patient.name" id="name" required />
      </div>
      <div>
        <label for="age">年龄:</label>
        <input type="number" v-model="patient.age" id="age" required />
      </div>
      <div>
        <label for="height">身高 (m):</label>
        <input type="number" v-model="patient.height" id="height" step="0.01" required />
      </div>
      <div>
        <label for="weight">体重 (kg):</label>
        <input type="number" v-model="patient.weight" id="weight" step="0.1" required />
      </div>
      <div>
        <label for="history">病史:</label>
        <input type="text" v-model="patient.history" id="history" required>
      </div>
      <button type="submit">提交</button>
    </form>
    <div v-if="result !== null">
      <h2>诊断结果</h2>
      <p>{{ result }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      patient: {
        name: '',
        age: '',
        height: '',
        weight: '',
        history: ''
      },
      result: null
    };
  },
  methods: {
    diagnose() {
      const { height, weight } = this.patient;
      const bmi = weight / (height * height);
      if (bmi <= 18.5) {
        this.result = '体重过轻';
      } else if (bmi > 18.5 && bmi <= 24.9) {
        this.result = '正常';
      } else if(bmi>24.9&&bmi<=29.9){
        this.result = '体重过重';
      }else{
        this.result='肥胖'
      }
    }
  }
};
</script>

<style scoped>
div {
  margin: 10px 0;
}
label {
  display: inline-block;
  width: 100px;
}
input, textarea {
  width: 200px;
}
button {
  margin-top: 10px;
}
</style>